<template>
	<view>
		<!-- 头部 搜索框  开始-->
		<YgSearch></YgSearch>
		<!-- 头部 搜索框  结束-->

		<!-- 轮播图  开始 -->
		<view>
			<u-swiper 
			:list="swiperList"
			name="image_src"
			height="340"
			></u-swiper>
		</view>
		<!-- 轮播图  开始 -->


		<!-- 导航 开始-->
		<view class="catitem u-flex">
			<navigator 
			class="u-flex-1  u-padding-30"
			v-for="item in catitems" 
			:key="item.name"
			>
				<u-image
				width="100%"
				mode="widthFix"
				:src="item.image_src">
				</u-image>
			</navigator>
		</view>
		<!-- 导航 结束-->

		<!-- 楼层  开始 -->
		<view class="floor">
			<view class="floor_g" 
			v-for="(item1, index1) in floor"
			:key="index1"
			>
				<view class="floor_title">
					<u-image
					width="100%"
					mode="widthFix"
					:src="item1.floor_title.image_src"
					>
					</u-image>
				</view>

				<view class="floor_content">
					<navigator 
					v-for="(item2, index2) in item1.product_list"
					:key="item2.name"
					>
						<u-image
						height="100%"
						:mode="index2===0?'widthFix':'scaleToFill'"
						:src="item2.image_src"
						>
						</u-image>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 楼层  结束 -->
		
	</view>
</template>

<script>
	export default {
		data(){
			return{
				// 请求数据保存轮播图
				swiperList:[],
				// 导航
				catitems:[],
				// 楼层
				floor:[],
			}
		},
		// async await 使异步变同步请求
		// async onLoad(){
		// 	const [err, res] = await uni.request({
		// 		url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"
		// 	})
		// 	console.log(res);
		// 	// 请求数据 赋值 保存
		// 	this.swiperList = res.data.message
		// }
		async onLoad() {
		// 轮播图请求
		const res = await this.$u.get("/home/swiperdata");
		console.log(res);
		this.swiperList = res.message;
		// 导航请求
		const resCats = await this.$u.get("home/catitems");
		console.log(resCats);
		this.catitems = resCats.message;
		// 楼层
		const resfloor = await this.$u.get("/home/floordata");
		console.log(resfloor);
		this.floor = resfloor.message;
	},
	}
</script>

<style lang="scss">
.floor{
	margin: 10rpx;
	.floor_g{
		
		.floor.title{
			margin-top: 15rpx;
		}
		.floor_content{
			overflow: hidden;
			navigator{
				float: left;
				width: 32%;
				
			&:nth-last-child(-n + 4){
				height: 188rpx;
				margin-left: 10rpx;
			}
			&:nth-last-child(-n + 2){
				margin-top: 15rpx;
			}
			}
			
		}
	}
}

</style>
